<template>
  <div class="item-box">
    <div class="heard hw-box-style-flex hw-box-style-flex-r-center">
      <p class="heard-title1">首页单元样式</p>
    </div>
    <div class="item-content">
      <t-collapse expand-icon-placement="right" :defaultExpandAll="true">
        <t-collapse-panel :value="index" v-for="(item, index) in typeList" :key="index">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title1">{{ index + 1 >= 10 ? index + 1 : 0 + '' + (index + 1) }}</span>
              <span class="title2">{{ item.text }}</span>
            </div>
          </template>
          <template #default>
            <div class="default-box hw-flex-style-c-c" @click="setstyle(item, index)">
              <div class="default-shadow hw-flex-style-c-c">
                <div class="hw-click-cursor default-btn hw-flex-style-c-c" @click="setHome">替换样式</div>
              </div>
              <div class="img-boxs">
                <img :src="getImgInfo(item.type)" alt="" />
              </div>
            </div>
            <div
              class="numner-ipt"
              v-if="
                exbitsType && item.children.length < 1 && item.showpieceTotal > 0 && item.type >= 8 && item.type <= 11
              "
            >
              <span>展品数量</span>
              <t-input-number
                v-model="item.number"
                style="width: 100%"
                theme="column"
                :min="2"
                :max="6"
                @change="handleChange"
              />
            </div>
          </template>
        </t-collapse-panel>
      </t-collapse>
    </div>
    <SettingDialog
      :unitList="unitList"
      :value2="value2"
      :visible="visible"
      @close="close"
      @ok="ok"
      :showpieceTotal="showpieceTotal"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, watch } from 'vue';
import { urls } from '@/utils/request/upload';
import { useRouter, useRoute } from 'vue-router';
import { moduleType, SubunitList, moduleType4, SubunitList4 } from '../../data';
import SettingDialog from '../SettingDialog.vue';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';

const store = useProjectStore();
const { styleInfo } = storeToRefs(store);
const getUnitBanner = ref([]);
const router = useRouter();
const route = useRoute();
const exbitsType = ref(false);
const indexs = ref(0);
const unitList = ref([]);
// unitList.value = moduleType.Subunit[2];
const typeList = ref([]);
const showpieceTotal = ref(0); //展品数量
typeList.value = store.styleInfo.moduleList;
const visible = ref(false);
const value2 = ref(0);
const setHome = () => {
  // visible.value = true;
};
const init = () => {
  if (route.meta.templateId == 395740859879493) {
    exbitsType.value = true;
  }
  switch (route.meta.templateId) {
    case 410276336631877:
      getUnitBanner.value = SubunitList4;
      break;

    default:
      getUnitBanner.value = SubunitList;
      break;
  }
};
init();

const getImgInfo = (e) => {
  let res = getUnitBanner.value.findIndex((el: any) => {
    return el.id === e;
  });
  if (res !== -1) {
    return getUnitBanner.value[res].img + '?imageView2/2/w/274/h/128/format/webp';
  } else {
    return '';
  }
};
const pathBlank = () => {
  // /prijectMenu/plan
  router.push({ path: '/prijectMenu/plan', query: { projectId: localStorage.getItem('projectId') } });
};
const handleChange = (v, ctx) => {
  console.info('change', v);
  sessionStorage.setItem('tem1Num', v);
};
const close = () => {
  visible.value = false;
};
const ok = (e: number) => {
  typeList.value[indexs.value].type = e;
  visible.value = false;
  store.setstyleInfoModel(typeList.value);
};
const setstyle = (e: any, index: number) => {
  // console.log(e.showpieceTotal);
  showpieceTotal.value = e.showpieceTotal;
  switch (route.meta.templateId) {
    case 410276336631877:
      if (e.children.length == 0 || e.children.length == 1) {
        unitList.value = moduleType4.Subunit[0];
      } else if (e.children.length > 2) {
        unitList.value = moduleType4.Subunit[2];
      } else {
        unitList.value = moduleType4.Subunit[e.children.length - 1];
      }
      indexs.value = index;
      value2.value = e.type;
      // console.log(value2.value);
      visible.value = true;
      break;

    default:
      if (e.children.length == 0) {
        unitList.value = [];
      } else if (e.children.length > 2) {
        unitList.value = moduleType.Subunit[6];
      } else {
        unitList.value = moduleType.Subunit[e.children.length - 1];
      }

      indexs.value = index;
      value2.value = e.type;
      visible.value = true;
      break;
  }
};

watch(
  () => styleInfo,
  () => {
    typeList.value = store.styleInfo.moduleList;
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import './index.less';

.default-box {
  position: relative;
  width: 100%;
  height: 208px;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid #cfbda8;
}
.img-boxs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  // background: #fbf9f6;
  border-radius: 4px;
  img {
    border-radius: 3px;
    width: 90%;
    height: 128px;
  }
}
.default-shadow {
  opacity: 0;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 208px;
  background: rgba(0, 0, 0, 0.4);
}
.default-btn {
  width: 88px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid #fff;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
}
.default-box:hover {
  .default-shadow {
    opacity: 1;
  }
}
.numner-ipt {
  display: flex;
  flex-direction: column;
  margin: 12px 0;
  width: 100%;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    margin-bottom: 16px;
  }
}
:deep(.t-collapse-panel__content) {
  padding-bottom: 16px;
}
:deep(.t-collapse-panel__content) {
  padding: 20px 16px !important;
}
.title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 24px;
}
</style>
